<%@ page contentType="text/html;charset=UTF-8" language="java" import="com.dao.*" %>
<%@ page import="java.util.List" %>
<%@ page import="com.bean.User" %>
<%@ page import="com.bean.Friends" %>
<%@ page import="websocket.chat.GloabStatus" %>
<%@ page import="com.bean.Group" %>
<%
    User user =(User)session.getAttribute("user");
    List<Friends> myfriend=null;
    List<Group> myGroup=null;
    if(user==null){
        user = new User();
    }else {
        FriendsDao friendsDao = new FriendsDao();
        myfriend = friendsDao.findFriends(user.getId());
        GroupDao groupDao = new GroupDao();
        myGroup =groupDao.getGroupByUser(user.getId());
    }
%>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>WebChat 系统</title>

    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap/css/index.css" rel="stylesheet">
    <link href="bootstrap/css/drag.css" rel="stylesheet">
    <link href="bootstrap/css/custom.css" rel="stylesheet">
    <link href="bootstrap/css/dashboard.css" rel="stylesheet">
    <script src="bootstrap/js/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="bootstrap/jslib/drag.js"></script>
    <script src="bootstrap/js/json2.js"></script>
    <script src="js/utils.js"></script>
    <style type="text/css">
        #console {
            border: 1px solid #CCCCCC;
            border-right-color: #999999;
            border-bottom-color: #999999;
            height: 70px;
            overflow-y: scroll;
            padding: 5px;
            width: 100%;
        }

        #console p {
            padding: 0;
            margin: 0;
        }
        .zhedie1{
            height: 40px;
            overflow:hidden;
        }
    </style>
    <script type="text/javascript">
        //--------------
        var myQQ = '<%=user.getQq()%>';
        var ctx = '<%=request.getContextPath()%>';

        //-------------
        $(function () {
            $('#messageChat').hide();
            $('.box fieldset').each(function () {
                $(this).dragging({
                    move: 'both',
                    randomPosition: false,
                    hander: '.hander'
                });
            });
        });
        function zhedie(c) {
            $("." + c).toggle();
        }

        //------------websocket
        var Chat = {};

        Chat.socket = null;

        Chat.connect = (function (host) {
            if ('WebSocket' in window) {
                Chat.socket = new WebSocket(host);
            } else if ('MozWebSocket' in window) {
                Chat.socket = new MozWebSocket(host);
            } else {
                Console.log('你的浏览器不支持socket，请更新浏览器.');
                return;
            }

            Chat.socket.onopen = function () {
                Console.log('Info: WebSocket connection opened.');
                document.getElementById('sendBtn').onclick = function (event) {
                    Chat.sendMessage();
                };

                Chat.register();
            };

            Chat.socket.onclose = function () {
                Console.log('Info: WebSocket closed.');
            };

            Chat.socket.onmessage = function (message) {
                Console.log(message.data);
                if(message.data.substring(message.data.length-4)==":REG"){
                    //更新状态
                    updateStatus(message.data.split(",")[0],"在线");
                }else if(message.data.substring(message.data.length-4)==":STZ"){//好友添加
                    noticeNum();
                    var array = message.data.split(",");
                    $('#noticeFrom').append('<p>'+array[1]+'</p>');
                    friendNoticeResult(array[2]);
                }else if(message.data.substring(message.data.length-4)==":SDE"){//好友删除
                    noticeNum();
                    var array = message.data.split(",");
                    $('#noticeFrom').append('<p>'+array[1]+'</p>');
                    $('#'+array[2]).remove();
                }else if(message.data.substring(message.data.length-4)==":GTZ"){//群添加
                    noticeNum();
                    var array = message.data.split(",");
                    $('#noticeFrom').append('<p>'+array[1]+'</p>');
                    //更新列表
                    groupUserListAdd(array[0],array[2],"在线");
                    //
                }else if(message.data.substring(message.data.length-4)==":GQT"){//群退出
                    noticeNum();
                    var array = message.data.split(",");
                    $('#noticeFrom').append('<p>'+array[1]+'</p>');
                    //更新列表
                    groupUserListDelete(array[0],array[2]);
                    //
                }else if(message.data.substring(message.data.length-4)==":END"){
                    //更新状态
                    updateStatus(message.data.split(",")[0],"离线");
                }else if(message.data.charAt(0)=="{" && message.data.charAt(message.data.length-1)=="}") {
                    var obj = eval('(' + message.data + ')');
                    var toQQ= obj.toQQ;
                    if(toQQ.length>7){//群组消息
                        if($('#messageChat').attr("title")==obj.toQQ){
                            //同一个人添加
                            addMessageLeft(obj);
                            if($('#messageChat').css("display")=="none"){
                                addMessageNum(obj);
                            }
                        }else {
                            //添加到消息提示框
                            addMessageNum(obj);
                        }

                        // h5 保存消息
                        h5SaveMessage(obj.toQQ,obj);
                    }else {//单人消息
                        if($('#messageChat').attr("title")==obj.fromQQ){
                            //同一个人添加
                            addMessageLeft(obj);
                            if($('#messageChat').css("display")=="none"){
                                addMessageNum(obj);
                            }
                        }else {
                            //添加到消息提示框
                            addMessageNum(obj);
                        }
                        // h5 保存消息
                        h5SaveMessage(obj.fromQQ,obj);
                    }


                }
            };
        });

        Chat.initialize = function () {
            if (window.location.protocol == 'http:') {
                Chat.connect('ws://' + window.location.host + '/webqq/websocket/chat');
            } else {
                Chat.connect('wss://' + window.location.host + '/webqq/websocket/chat');
            }
        };

        Chat.sendMessage = (function () {
            var message = document.getElementById('sendMessage').value;
            if (message != '') {

                document.getElementById('sendMessage').value = '';
                var to = $('#messageChat').attr('title');
                var obj =initMessageObj(myQQ,to,message);
                addMessageRight(obj);
                Chat.socket.send(JSON.stringify(obj));

                //h5 本地保存消息
                h5SaveMessage(to,obj);
            }

        });
        //进行socket 注册
        Chat.register = (function () {
            var qq='<%=user.getQq()%>'
            var userName='<%=user.getUsername()%>'
            Chat.socket.send(qq+","+userName+","+":REG");
        });


        var Console = {};

        Console.log = (function (message) {
            var console = document.getElementById('console');
            var p = document.createElement('p');
            p.style.wordWrap = 'break-word';
            p.innerHTML = message;
            console.appendChild(p);
            while (console.childNodes.length > 25) {
                console.removeChild(console.firstChild);
            }
            console.scrollTop = console.scrollHeight;
        });

        Chat.initialize();

        //页面监听
        document.addEventListener("DOMContentLoaded", function () {
            console.log("html load finish")
        }, false);

    </script>
</head>

<body>

<jsp:include page="header.jsp"></jsp:include>
<div class="container-fluid">
    <div class="row" style="height: 1000px">
        <div class="col-md-3 sidebar">
            <ul class="nav nav-sidebar" id="myfriendsArray">
                <li class="active" onclick="zhedie('zhedie1')"><a href="#">我的好友 <span
                        class="sr-only">(current)</span></a></li>
                <%
                 for(Friends friends:myfriend){
                %>
                <li onclick="messageDialogShow(this)" id="<%=friends.getUser().getQq()%>" class="zhedie1">

                    <a class="col-md-6"><img src="images/<%=friends.getUser().getHeadPic()%>" width="40" height="30"/>&nbsp;<%=friends.getUser().getUsername()%>(<%=friends.getUser().getQq()%>)</a>

                    <span class="badge col-md-2" id="mnum<%=friends.getUser().getQq()%>"></span>
                    <a class="col-md-4" id="status<%=friends.getUser().getQq()%>">
                       <%=GloabStatus.status(friends.getUser().getQq())%>
                    </a>
                </li>
                <%
                 }
                %>


            </ul>
            <ul class="nav nav-sidebar" id="myGroup">
                <li class="active"><a href="#">
                    <span onclick="zhedie('zhedie2')">我的群组</span><i onclick="createGroup()" class="glyphicon glyphicon-plus pull-right"></i></a></li>

               <%
                for (Group group:myGroup){
               %>
                <li class="zhedie2" onclick="groupDialogShow(this)" id="<%=group.getQq()%>">
                    <a class="col-md-10"><%=group.getName()%>(<%=group.getQq()%>)</a>
                    <span class="badge col-md-2" id="mnum<%=group.getQq()%>"></span>
                </li>
                <%
                }
               %>



            </ul>
        </div>

        <div class="col-md-9 col-md-offset-3" style="height: 1000px;margin-top: 50px">
            <div class='box' id="messageChat" title="">
                <fieldset class="col-md-6" style="height: 350px">
                    <div class="bhoechie-tab-container dialog">
                        <div id="dialog-header-msg" class="dialog-header hander row ">
                            <i onclick="deleteFriend()" class="glyphicon glyphicon-user col-md-6" id="messageChatUsername">姓名：</i>
                            <i onclick="$('#messageChat').hide()" class="glyphicon glyphicon-remove col-md-2 col-md-offset-4"></i>
                        </div>

                        <div id="dialog-content-box" class="dialog-content">

                          <!-- 消息内容 -->

                        </div>
                        <div class="dialog-send-box">
                            <div>
                                <textarea id="sendMessage" style="border: 1px solid" class="col-md-12" rows="1"
                                          placeholder="输入消息..."></textarea>
                                <input type="button" id="sendBtn" class="btn col-md-offset-5 col-md-2 btn-primary"
                                       value="发送"/>
                            </div>
                        </div>
                    </div>


                </fieldset>
                    <!--  右边的人员显示窗口-->
                        <div  class="col-md-4 pull-right"  style="height: 800px">
                            <div  id="groupUserDialog" class="bhoechie-tab-container dialog">
                                <div class="dialog-header hander row ">
                                    <i class="glyphicon glyphicon-user col-md-offset-1" id="rightDiv"></i>
                                    <br/>
                                    <i class="col-md-offset-1 col-md-12" id="rightDiv2"></i>
                                </div>

                                <div  class="dialog-content" id="groupUserList">

                                                 <!-- list -->


                                </div>
                                <div class="col-md-12 col-md-offset-5" ><button class="btn btn-primary" onclick="quitGroup()">退群</button></div>
                            </div>
                        </div>
            </div>
        </div>
        <div class="col-md-10 col-md-offset-2" style="height: 50px">
            <div id="console"></div>
        </div>
    </div>
</div>

<!-- 添加好友-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">添加好友</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="friendAdd" class="control-label">QQ号:</label>
                        <input type="text" class="form-control" id="friendAdd">
                    </div>
                    <div class="form-group">
                        <textarea class="form-control" readonly id="friendResult"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="friendResult()">申请添加</button>
            </div>
        </div>
    </div>
</div>
<!--消息对话框-->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">通知</h4>
            </div>
            <div class="modal-body">
                <form id="noticeFrom">

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="msmClear()">清除</button>
            </div>
        </div>
    </div>
</div>
<!-- 添加群组-->
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">创建群组</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="friendAdd" class="control-label">群组QQ:</label>
                        <input type="text" class="form-control" id="groupQQ" readonly/>
                    </div>
                    <div class="form-group">
                        <label for="friendAdd" class="control-label">群组名称:</label>
                        <input type="text" class="form-control" id="goupName">
                    </div>
                    <div class="form-group">
                        <textarea class="form-control" readonly id="groupTextarea"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="createGroupResult()">创建群组</button>
            </div>
        </div>
    </div>
</div>
<!-- 添加群组-->
<div class="modal fade" id="myModal4" tabindex="-1" role="dialog" >
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">添加群组</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="friendAdd" class="control-label">群组QQ号:</label>
                        <input type="text" class="form-control" id="groupAdd">
                    </div>
                    <div class="form-group">
                        <textarea class="form-control" readonly id="groupAddResult"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="groupAddResult()">申请添加</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
